<template>
	<view class="honbox">
		<view class="hoimage">
			<image v-if="!avatar" class="hopic" src="/static/logo.png" mode=""></image>
			<image v-else class="hopic" :src="avatar" mode=""></image>
		</view>
		<view class="hononav">
			<view class="hontit">已获得：<text style="color: #10c696;">{{honor.length}}/{{list.length}}</text></view>
			<view class="nav">
				<view class="lsit" v-for="(item,index) in list" :key="index">
					<image v-if="item.isHonor==0" class="listpic" :src="item.image1" mode=""></image>
					<image v-else-if="item.isHonor==1" class="listpic" :src="item.image2" mode=""></image>
					<view class="tit">{{item.name}}</view>
					<view class="textli">{{item.intro}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref ,onMounted} from 'vue';
import request from '../../utils/request';
let avatar = ref('')
onMounted(()=>{
	token.value=uni.getStorageSync('token')
	avatar.value = uni.getStorageSync('userinfo').avatar
	request.post('User/getHonors',{header:{
		"token":token.value
	}}).then(res=>{
		console.log(res);
		list.value=res.data
		honor.value=res.data.filter(item=>item.isHonor==1)
		console.log(honor.value);
	}).catch(err=>{
		console.log(err);
	})
})
let honor=ref([])
let token=ref('')
let list=ref([])
</script>

<style scoped>
	.honbox{
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
	} 
	.hoimage{
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.hopic{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
	.nav{
		display: flex;
		flex-wrap: wrap;
	}
	.hononav{
		width: 700rpx;
		height: 1050rpx;
		border-radius: 30rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		background-color: #fff;
		box-sizing: border-box;
		box-shadow:0 0 10px -2px rgba(0,0,0,.3);
	}
	.hontit{
		width: 100%;
		height: 130rpx;
		line-height: 130rpx;
		padding-left: 70rpx;
		box-sizing: border-box;
		font-weight: 700;
	}
	.lsit{
		width: 300rpx;
		height: 330rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
	.listpic{
		width:100rpx;
		height: 120rpx;
	}
	.tit{
		color: #10c696;
		font-weight: 700;
	}
	.textli{
		text-align: center;
		font-size: 12px;
		color: #7d7d7d;
		font-weight: 600;
	}
</style>
